<template>
  <el-form
    ref="form"
    :model="form"
    :label-position="labelposition"
    class="filterform groupfrom"
    label-width="110px"
  >
    <el-form-item label="企微标签：" class="mb-10">
      <div class="flex">
        <el-select
          v-model="form.grouptype"
          placeholder=""
          size="small"
          class="mr-8"
          style="width: 126px"
        >
          <el-option
            v-for="(item, index) in lableList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <multipleSelect
          size="small"
          placeholder="企微标签"
          :width="`calc(100% - 136px)`"
          :receiverNameOpt="lableOpt"
        ></multipleSelect>
      </div>
    </el-form-item>
    <el-form-item label="智能标签：" class="mb-10">
      <el-select
        v-model="form.labeltype"
        placeholder=""
        size="small"
        class="mr-8"
        style="width: 126px"
      >
        <el-option
          v-for="(item, index) in lableList"
          :key="index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <multipleSelect
        size="small"
        placeholder="智能标签"
        :width="`calc(100% - 136px)`"
        :receiverNameOpt="lableOpt"
      ></multipleSelect>
    </el-form-item>
    <el-form-item label="加好友时间：" prop="times" class="mb-10">
      <el-date-picker
        v-model="form.times"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        range-separator="-"
        size="small"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        class="w_full"
      ></el-date-picker>
    </el-form-item>

    <el-form-item label="备注：" class="mb-10">
      <el-select v-model="form.remark" size="small" placeholder="请选择" class='w_full'>
        <el-option
          v-for="item in remarkList"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="性别：">
      <el-select v-model="form.sex" size="small" placeholder="请选择" class='w_full'>
        <el-option
          v-for="item in sexList"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
import MultipleSelect from "@/components/MultipleSelect";
export default {
  data() {
    return {
      lableList: [
        { label: "含任意标签", value: 1 },
        { label: "含所有标签", value: 2 },
        { label: "未打任何标签", value: 3 },
      ],
      form: {
        grouptype: 1,
        name: "",
        labels: [],
        labeltype: 1,
        grouplabel: "",
        min: "",
        max: "",
      },
      visible: false,
      numberstr: "",
      lableOpt: [
        { value: 1, label: "客户等级", children: ["一般", "重要", "核心"] },
        { value: 2, label: "客户等级2", children: ["一般2", "重要2", "核心2"] },
      ],
      remarkList: [
        { name: "无备注", value: 1 },
        { name: "有备注", value: 2 },
      ],
      sexList: [
        { name: "男", value: 1 },
        { name: "女", value: 2 },
        { name: "未知", value: 3 },
      ],
    };
  },
  props: {
    labelposition: {
      default: "top",
    },
  },
  components: {
    MultipleSelect,
  },
  methods: {
    submitNum() {
      this.numberstr = this.form.min + " ~ " + this.form.max;
      console.log("this.numberstr:", this.numberstr);
      this.visible = false;
    },

    handleAddLable() {
      if (this.form.name) {
        if (this.form.labels.includes(this.form.name)) {
          this.$message.warning("标签重复");
          return;
        }
        this.form.labels.push(this.form.name);
        this.form.name = "";
      }
    },

    removeLable(index) {
      this.form.labels.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
.linebox {
  width: 36px;
}
.el-form {
  ::v-deep .el-form-item__label {
    color: rgba($color: #000000, $alpha: 0.65);
    padding: 0 !important;
  }
}
.labelitem {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  background-color: #fafafa;
  padding: 2px 7px;
  line-height: 22px;
}
</style>